<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jquery表格插件|改变列宽--奇偶行不同色--鼠标滑过变色--点击变色</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Map.js"></script>
</head>
<body>
 
        <%
                         
                        int counth=500;
    %>
    <div class="b1" style="height: <%=counth %>px;position: relative;width:800px;background-color: #dddddd" _id="zzltable">
        <div class="b2" style="position: absolute;background-color:#edeef0;left: 1px;top: 1px;bottom: 1px;right: 1px"><!-- 左边线 -->
    <%
                        int toph=24;
                        int coutclo=10;
                        int countrows=30;
                        int conh=counth-2-24;
    %>
<%--              <div class="b3" style="position: absolute;right: 0px;width: 16px;background-color:#dddddd;top:0px;height:<%=toph %>px;z-index:99"> --%>
<!--                             <div class="c1" style="position: absolute;left: 1px;bottom: 1px;top: 0px;right: 0px;background-color: #efefef ;z-index:100">  -->
                                     
<!--                             </div>  -->
<!--            </div> -->
            <div class="b4" style='height:70px;width:798px;background-color:#efefef;position:absolute;overflow:auto;top: 0px'  _id="sb" _root=1>
             
                        <div class="c2"style="position: absolute;background-color:#dddddd;top:23px;height: 1px;left: 0px;right: 0px;z-index:99">
                        </div> <!-- 下边线 -->
             
                    <%
                        int left=0;
                        int clow=100;
                        int clowhr=1;
                        for(int i=0;i<coutclo;i++){
                            String color="#edeef0";
                        %>
                                <div class="b5" style='line-height:<%=toph %>px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; text-align: center;height:80px;width:<%=clow%>px;background-color:<%=color %>;position:absolute;left:<%=left%>px;' _root=2 _son=1>
                                        <%=1000009 %><%=i %>
                                </div>    
                                <%
                                    left+=clow;
                                color="#dddddd";
                                %>
                                 
                                 
                                 
                                <div class="b6" style='cursor: e-resize;height:80px;width:<%=clowhr%>px;background-color:<%=color %>;position:absolute;left:<%=left%>px;top:0px;z-index:100' _root=3 " _son=1>
                                    <div class="c3" style="width: 5px;left: -5px;background-color: white;position: absolute;top:3px;height:<%=toph-6%>px;z-index:101;filter:alpha(opacity=1);-moz-opacity:0.01;-khtml-opacity: 0.01;opacity: 0.01;;overflow:hidden">
                                    <%=i %>
                                    </div>
                                    <!-- 中间线 -->
                                </div>    
                        <%
                                left+=clowhr;
                        }
                    %>
            </div>
            <div class="b7" style='height:<%=conh%>px;width:798px;background-color:#edeef0;position:absolute;overflow:auto;top:<%=toph%>px'  _id="sb2" _root=1>
            <%
                 
                int left2=0;
                int top=0;
                int clow2=100;
                for(int i=0;i<coutclo;i++){
                %>
                        <div class="b8" style='height:<%=conh%>px;width:<%=clow2%>px;position:absolute;left:<%=left2%>px;top:<%=top %>px'  _son=1>
                                <%
                                    for(int jb=0;jb<countrows;jb++){
                                        String ck="#f7f7f7";
                                        if(jb%2==0){
                                            ck="white";
                                        }
                                    %>
                                            <div class="b10" style="height:20px;background-color: <%=ck %>;text-align:center">
                                                    <%=jb %>
                                            </div>
                                <%
                                    }
                                %>
                        </div>    
                        <%
                            left2+=clow2;
                        String color2="#dddddd";
                        %>
                       <div class="b9" style='height:<%=conh%>px;width:<%=clowhr%>px;background-color:<%=color2 %>;position:absolute;left:<%=left2%>px;top:<%=top %>px' _son=1></div><!-- 右边线 -->   
                <%
                        left2+=clowhr;
                }
                 
                %>
                </div>
            </div>
    </div>
     
     
    <br><br><br>
    <textarea rows="40" cols="140" id=zzl2></textarea>
    <script>
         var hr=$("div[_root=3]");//中间线
         console.info(hr.length);
         var curhr;
         var sb=$("div[_id=sb]");//下划线
         var zzltable=$("div[_id=zzltable]");//最为层div
         var resize=false;
         hr.mousedown(function(e) {  
            resize = true;   
            curhr=$(this);
            return false;
        });
         zzltable.mousemove(function(e){  
             if(resize){
                     var left =e.clientX;
                     left+=$("div[_id=sb2]").scrollLeft();//内容
                     //当前的hr分割线对象
                     var objhr=$(curhr);
                     var left_pos =parseInt(sb.offset().left)+parseInt(getprewidth(objhr.prev()));
                     var df=left-left_pos;
                     var curpre=curhr.prev();
                     if((curpre.width()+df)>20){
                             curpre.width(curpre.width()+df+"px"); 
                             curhr.css("left",parseInt(getprewidth(objhr.prev()))+"px");
                             var tempcur=curhr.next();
                             while(true){
                                var _root=tempcur.attr("_root");
                                 if(_root){
                                    var left_pos2 =parseInt(getprewidth(tempcur.prev()));
                                    tempcur.css("left",left_pos2+"px");
                                    tempcur=tempcur.next();
                                }else{
                                    break;
                                }
                             }
                             //触发底部列的宽度变化同步
                            changesize();
                     }
             }      
        });
        function changesize(){
                         var sb2=$("div[_id=sb2]");
                             var map=new Map();
                             sb.find("div[_son=1]").each(function(tempi){
                                var _width=$(this).css("width");
                                var _left=$(this).css("left");
                                map.put(tempi+"_w",_width);
                                map.put(tempi+"_l",_left);
                             });
                             sb2.find("div[_son=1]").each(function(tempi){
                                var _width=map.get(tempi+"_w");
                                var _left=map.get(tempi+"_l");
                                $(this).css("left",_left);
                                $(this).css("width",_width);
                             });
        }
         zzltable.mouseup(function(e) 
        {
            resize = false;
        });
        zzltable.bind("mouseleave",function(e)
        {
            resize = false;  
            return false; 
        });
        //求得当前对象最右边的点离浏览器最左边的距离
        function getprewidth(obj){
            var fw=obj.width();
            var prev=obj.prev();
            var _root=prev.attr("_root");
            if(_root){
                return fw+=getprewidth(prev);
            }else{
                return fw;
            }
        }
        $("div[_id=sb2]").scroll(function(){
             var left=$(this).scrollLeft();
             $("div[_id=sb]").scrollLeft(left);
        });
         $("div[_id=sb]").scroll(function(){
             $(this).scrollTop(0);//固定滚动条不能上下拖动
             var left=$("div[_id=sb2]").scrollLeft();
             $(this).scrollLeft(left);//固定头部滚动条的位置和底部内容同步
             changesize();
        });
         
       
</script>
 
 
 
<%!
         
        public static String getRandColorCode(){ 
            String r,g,b; 
            Random random = new Random(); 
            r = Integer.toHexString(random.nextInt(256)).toUpperCase(); 
            g = Integer.toHexString(random.nextInt(256)).toUpperCase(); 
            b = Integer.toHexString(random.nextInt(256)).toUpperCase(); 
            r = r.length()==1 ? "0" + r : r ; 
            g = g.length()==1 ? "0" + g : g ; 
            b = b.length()==1 ? "0" + b : b ; 
            return r+g+b; 
        } 
%>
</body>
</html>